<template>
  <div id="app">
    <div
      class="nav"
      style="display: flex; background: rgb(84, 92, 100); height: 60px"
      v-if="$route.meta.navShow"
    >
      <h1 class="logotext">纵信快手项目管理</h1>
      <div class="bar" style="flex: 1">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
        
          <el-menu-item index="/">项目</el-menu-item>
          <el-menu-item index="/team"
                        v-if="quanxian">团队</el-menu-item>
          <el-menu-item index="/management"
                        v-if="quanxian">账户管理</el-menu-item>
        </el-menu>
      </div>
      <el-row type="flex"
              justify="space-around"
              align="middle"
              class="nav_sz"
              style="width: 80px">
        <el-popover placement="bottom"
                    width="200"
                    trigger="click">
          <div class="myde">
            <ul>
              <li>UID: {{ userinfo.uid }}</li>
              <li>名称：{{ userinfo.name }}</li>
              <li>邮箱：{{ userinfo.account }}</li>
              <li>部门：{{ userinfo.depart }}</li>
              <li>角色：{{ userinfo.role }}</li>
              <!-- <li>角色：{{}}</li> -->
            </ul>
            <el-row type="flex"
                    justify="center">
              <el-button type="primary"
                         size="mini"
                         @click="changepass = true">修改密码</el-button>
              <el-button @click="logout"
                         type="danger"
                         size="mini">退出登录</el-button>
            </el-row>
          </div>
          <i slot="reference"
             class="el-icon-user-solid"></i>
        </el-popover>
      </el-row>
      <el-dialog title="修改密码"
                 :visible.sync="changepass"
                 :close-on-click-modal="false"
                 width="450px"
                 center>
        <el-row align="middle"
                justify="center">
          <div class="demo-input-suffix">
            <span>旧密码</span>
            <el-input placeholder="请输入内容"
                      v-model="oldpass"
                      type="password">
            </el-input>
          </div>
          <div class="demo-input-suffix">
            <span>新密码：</span>
            <el-input placeholder="请输入内容"
                      v-model="newpass1"
                      type="password">
            </el-input>
          </div>
          <div class="demo-input-suffix">
            <span>确认密码：</span>
            <el-input placeholder="请输入内容"
                      v-model="newpass2"
                      type="password">
            </el-input>
          </div>
        </el-row>
        <el-row type="flex"
                align="middle"
                justify="center">
          <el-button size="small"
                     @click="changepass = false">取 消</el-button>
          <el-button size="small"
                     type="primary"
                     :loading="pwdLoading"
                     @click="submitPassword">确定</el-button>
        </el-row>
      </el-dialog>
    </div>
    <router-view />
  </div>
</template>
<script>
import { getToken } from "./utils/auth.js";
export default {
  data () {
    var samePassword = (rule, value, callback) => {
      /*eslint no-useless-escape: "error"*/
      if (value != this.passwordForm.newpass) {
        callback(new Error("两次输入密码不一致"));
        return;
      }
      callback();
    };
    return {
      islogin: true,
      changepass: false,
      pwdLoading: false,
      usertoken: "",
      oldpass: "",
      newpass1: '',
      newpass2: '',
      userinfo: {},
      quanxian: true
    };
  },
  computed: {
    activeMenu () {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
  mounted () {
    
    this.$bus.on("userInfo", (value) => {
      this.userinfo = value;
      if (this.userinfo.id_role != 1) {
        this.quanxian = false
      }
    });
    this.userinfo = JSON.parse(sessionStorage.getItem("userINFO"));
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key);
    },
    logout () {
      this.$confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.sessionStorage.clear();
          // 跳转到登录页
          this.$router.push("login");
          // 清除登录的cookies
          var cookies = document.cookie.split(";");
          for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i];
            var eqPos = cookie.indexOf("=");
            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
            document.cookie =
              name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
          }
          if (cookies.length > 0) {
            for (var i = 0; i < cookies.length; i++) {
              var cookie = cookies[i];
              var eqPos = cookie.indexOf("=");
              var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
              var domain = location.host.substr(location.host.indexOf("."));
              document.cookie =
                name +
                "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" +
                domain;
            }
          }
        })
        .catch(() => { });
    },
    submitPassword () {
      if (this.newpass1 == this.newpass2) {
        this.$axios.post('/api/user/password', {
          oldpass: this.oldpass,
          newpass: this.newpass1,
          checkpass: this.newpass2
        }).then((res) => {
          if (res.data.code == 1) {
            this.$message({
              message: '修改成功，请重新登录',
              type: 'success'
            });
            window.sessionStorage.clear();
            // 跳转到登录页
            this.$router.push("/login");
            this.changepass = false
            this.oldpass = ""
            this.newpass1 = ""
            this.newpass2 = ""
            // 清除登录的cookies
            var cookies = document.cookie.split(";");
            for (var i = 0; i < cookies.length; i++) {
              var cookie = cookies[i];
              var eqPos = cookie.indexOf("=");
              var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
              document.cookie =
                name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
            }
            if (cookies.length > 0) {
              for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i];
                var eqPos = cookie.indexOf("=");
                var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                var domain = location.host.substr(location.host.indexOf("."));
                document.cookie =
                  name +
                  "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" +
                  domain;
              }
            }
          }
        })
      } else {
        this.$message.error('两次输入密码不一致，请重新输入');
      }
    },
  },
};
</script>
<style lang="scss">
.logotext {
  color: #fff;
  width: 250px;
  height: 100%;
  line-height: 60px;
  font-size: 24px;
  text-align: center;
}
.nav_sz {
  width: 160px;
  height: 60px;
  font-size: 24px;
  color: #fff;
  // border-bottom: solid 1px #e6e6e6;
  cursor: pointer;
}
.myde ul {
  margin-bottom: 5px;
  list-style-type: none;
}

.myde ul li {
  text-align: left;
  padding-bottom: 5px;
}
.demo-input-suffix {
  margin-bottom: 15px;
}
.demo-input-suffix span {
  display: block;
  margin-bottom: 10px;
}
</style>
